<style lang="less">
    @import "logManage.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Form inline :label-width="70" class="search-form">
                        <Form-item label="搜索日志">
                            <Input type="text" v-model="searchKey" clearable placeholder="请输入搜索关键词"
                                   style="width: 200px"/>
                        </Form-item>
                        <Form-item label="创建时间">
                            <DatePicker type="daterange" v-model="selectDate" format="yyyy-MM-dd" clearable
                                        @on-change="selectDateRange" placeholder="选择起始时间"
                                        style="width: 200px"></DatePicker>
                        </Form-item>
                        <Form-item style="margin-left:-35px;" class="br">
                            <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                            <Button @click="handleReset">重置</Button>
                        </Form-item>
                    </Form>
                    <Row class="operation">
                        <Button @click="clearAll" type="error" icon="md-trash">清空全部</Button>
                        <Button @click="delAll" icon="md-trash">批量删除</Button>
                        <Button @click="getLogList" icon="md-refresh">刷新</Button>
                        <circleLoading v-if="operationLoading"/>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
                               @on-sort-change="changeSort" @on-selection-change="changeSelect">
                            <template slot-scope="{ row, index }" slot="action">
                                <div>
                                    <Button type="error" size="small" @click="remove(row)">删除</Button>
                                </div>
                            </template>
                            <template slot-scope="{ row, index }" slot="type">
                                <div>
                                    <tag v-if="row.type=='1'" color="error" size="default">异常</tag>
                                    <tag v-if="row.type=='0'" color="success" size="default">正常</tag>
                                </div>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage"
                              @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total
                              show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
    import {
        getLogListData,
        deleteLog,
        deleteAllLog
    } from "@/projects/basic/api/admin/log";
    import circleLoading from "_c/circle-loading/circle-loading.vue";

    export default {
        name: "log-manage",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: true,
                operationLoading: false,
                selectList: [],
                selectCount: 0,
                selectDate: null,
                searchKey: "",
                sortColumn: "createTime",
                sortType: "desc",
                columns: [
                    {
                        type: "selection",
                        width: 60,
                        align: "center",
                        fixed: "left"
                    },
                    {
                        title: "操作名称",
                        key: "title",
                        width: 110,
                        sortable: true,
                        fixed: "left"
                    },
                    {
                        title: "类型",
                        width: 100,
                        key: "type",
                        tooltip: true,
                        slot: 'type',
                        fixed: "left"
                    },
                    {
                        title: "请求类型",
                        key: "method",
                        width: 120,
                        align: "center"
                    },
                    {
                        title: "请求路径",
                        width: 150,
                        key: "requestUri"
                        ,
                        tooltip: true
                    },
                    {
                        title: "请求参数",
                        width: 200,
                        key: "params",
                        tooltip: true
                    },
                    {
                        title: "异常",
                        width: 200,
                        key: "exception",
                        tooltip: true
                    },
                    {
                        title: "登录用户",
                        key: "createBy",
                        width: 105,
                        sortable: true
                    },
                    {
                        title: "IP",
                        key: "remoteAddr",
                        width: 120,
                        sortable: true
                    },
                    {
                        title: "耗时(毫秒)",
                        key: "time",
                        width: 130,
                        align: "center"
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        sortable: true,
                        width: 150,
                        sortType: "desc"
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 98,
                        align: "center",
                        fixed: "right",
                        slot: 'action'
                    }
                ],
                data: [],
                pageNumber: 1,
                pageSize: 10,
                total: 0,
                startDate: "",
                endDate: ""
            };
        },
        methods: {
            init() {
                this.getLogList();
            },
            changePage(v) {
                this.pageNumber = v;
                this.getLogList();
                this.clearSelectAll();
            },
            changePageSize(v) {
                this.pageSize = v;
                this.getLogList();
            },
            selectDateRange(v) {
                if (v) {
                    this.startDate = v[0];
                    this.endDate = v[1];
                }
            },
            handleSearch() {
                this.pageNumber = 1;
                this.pageSize = 10;
                this.getLogList();
            },
            getLogList() {
                this.loading = true;
                let params = "";

                params = {
                    title: this.searchKey,
                    pageNumber: this.pageNumber,
                    pageSize: this.pageSize,
                    startDate: this.startDate,
                    endDate: this.endDate
                };
                getLogListData(params).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            handleReset() {
                this.searchKey = "";
                this.selectDate = null;
                this.startDate = "";
                this.endDate = "";
                this.getLogList();
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除该条数据?",
                    onOk: () => {
                        this.operationLoading = true;
                        deleteLog(v.id).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.init();
                            }
                        });
                    }
                });
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changeSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            changeSort(e) {
                this.sortColumn = e.key;
                this.sortType = e.order;
                if (e.order === "normal") {
                    this.sortType = "";
                }
                this.getLogList();
            },
            delAll() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择要删除的数据");
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                    onOk: () => {
                        let ids = "";
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        this.operationLoading = true;
                        deleteLog(ids).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.clearSelectAll();
                                this.init();
                            }
                        });
                    }
                });
            },
            clearAll() {
                this.$Modal.confirm({
                    title: "请谨慎进行此操作！",
                    content: "您确认要彻底清空删除所有数据?",
                    onOk: () => {
                        this.loading = true;
                        let ids = "";
                        this.selectList.forEach(function (e) {
                            ids += e.id + ",";
                        });
                        ids = ids.substring(0, ids.length - 1);
                        deleteAllLog().then(res => {
                            this.loading = false;
                            if (res.code === "0000") {
                                this.$Message.success("清空日志成功");
                                this.clearSelectAll();
                                this.init();
                            }
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
